<template>
  <div class="app-iframe-container">
    <!-- 搜索 -->
    <el-row>
      <el-form label-suffix="：" label-width="150px" label-position="right">
        <el-row>
          <el-col :span="6">
            <el-form-item label="会员ID">
              <el-input v-model="queryParam.appUserId"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="是否可兑换">
              <el-select v-model="queryParam.createOrderAble" clearable>
                <el-option :value="true" label="可以"/>
                <el-option :value="false" label="不可以"/>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>


        <el-row>
          <el-col :span="24" el-col style="text-align: center;">
            <el-button type="warning" size="small" icon="el-icon-search" @click="research">查询</el-button>
          </el-col>
        </el-row>

      </el-form>
    </el-row>
    <!-- /搜索 -->


    <!-- 表格内容 -->
    <el-row>
      <el-col :span="24">
        <el-table
          :data="data"
          border
          fit
          highlight-current-row
          style="width: 100%;">
          <el-table-column align="center" width="65" label="序列号">
            <template slot-scope="scope">
              {{ scope.$index+1 }}
            </template>
          </el-table-column>
          <el-table-column label="会员ID" prop="appUserId"/>
          <el-table-column label="会员名称" prop="appUserName"/>
          <el-table-column label="剩余签到次数" prop="signInNum"/>
          <el-table-column label="累计签到次数" prop="totalSignInNum"/>
          <el-table-column label="操作" >
            <template slot-scope="scope">
              <el-button type="text" @click="toHis(scope.row.id)">历史记录</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <!-- /表格内容 -->
    <!-- 分页 -->
    <div class="pagination-container">
      <pagination v-show="queryParam.total>0" :total="queryParam.total" :page.sync="queryParam.current" :limit.sync="queryParam.size" @pagination="search"/>
    </div>
    <!-- /分页 -->
  </div>
</template>

<script>

import memberApi from '@/api/member/member'
export default {
  name: 'MemberList',
  data() {
    return {
      listLoading: false,
      currentRow: '',
      queryParam: {
        current: 1,
        size: 10,
        total: 0,
        appUserId: null,
        createOrderAble: null
      },
      form: {
        addDateRange: ''
      },
      data: []
    }
  },
  computed: {

  },
  mounted() {
    this.search()
  },
  methods: {

    // 处理每页大小改变
    handleSizeChange(val) {
      this.queryParam.size = val
      this.search()
    },
    // 处理页数改变
    handleCurrentChange(val) {
      this.queryParam.current = val
      this.search()
    },
    // 列表
    search() {

      memberApi.page(this.queryParam).then(response => {
        if (response.data.code === 200) {
          var responseData = response.data.data
          this.data = responseData.records
          this.queryParam.current = responseData.current
          this.queryParam.total = responseData.total
          this.currentRow = ''
        } else {
          this.$message.error(response.data.msg)
        }
      })
    },
    // 重置分页条件，发起查询
    research() {
      this.queryParam.current = 1
      this.search()
    },
    // 详情
    toHis(id) {
      this.callNewPage(`/member/his/${id}`)
    },
  }
}
</script>

<style scoped>
  .el-row {
    margin-bottom: 20px;
  }
  .danger{
    color:#F56C6C
  }
</style>
